<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="homeView">

			<view class="top">
				<view class="left">
					<view class="helloWord">
						<text style="font-size: 60rpx;">H</text>
						<text>ello</text>
					</view>
					<view class="question">
						What would you like to eat today?
					</view>
				</view>
				<view class="right" @click="handleAvartClick">
					<image class="rightImg" src="@/static/icons/avart.png" mode=""></image>
				</view>
			</view>
			<searchBar class="bottom"></searchBar>

		</view>
	</view>

</template>

<script setup>
	import searchBar from '@/components/searchBar.vue'
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme
	} = storeToRefs(systemStore);


	let handleAvartClick = () => {
		uni.$emit('showToast', {
			title: 'test',
			detail: 'ddddddddddddddddd'
		})
	}
</script>

<style lang="scss" scoped>
	.bodyView {
		width: 100%;
	}

	.homeView {
		width: 100%;

		.top {
			padding: 0 $mainPadding;
			//width: 100%;
			@include flex-teng(row, space-between);
			column-gap: $mainPadding;

			.left {
				flex: 1;

				.helloWord {
					font-size: $fontSize2;

					@include useTheme {
						color: getValue("textColor2");
					}
				}

				.question {
					font-size: $fontSize;
				}
			}

			.right {
				background-color: $mainColor;
				border-radius: 50%;
				height: 96rpx;
				width: 96rpx;
				@include flex-teng;

				.rightImg {
					width: 54.3rpx;
					height: 48rpx;
				}
			}
		}

		.bottom {
			margin: $mainPadding $mainPadding 0 $mainPadding;

			border-radius: 40px;
			height: 92rpx;
			padding: 0 $mainPadding;
			//width: calc(100vw - $mainPadding * 2);

			@include useTheme {
				background-color: getValue("bottombgColor");
				color: getValue("textColor2");
			}

			@include flex-teng(row, flex-start);

			.bottomInput {
				margin-left: 20rpx;
			}
		}
	}
</style>